import Taro, { switchTab, navigateTo } from '@tarojs/taro'
import { View, ScrollView, Button, Block } from '@tarojs/components'
import { AtIcon, AtButton } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api from '../../utils/api'
import { formatTime } from '../../utils/formatTime'
import { useAsyncEffect } from '../../utils/index'

import './index.less'
import request from '../../utils/request'

function Record() {
  const [pageIndex, setPageIndex] = useState(1)
  const [pageSize, setPageSize] = useState(30)
  const [totalCount, setTotalCount] = useState(0)
  const [isEnd, setIsEnd] = useState(false)
  const [dataList, setDataList] = useState([])
  const getList = () => {
    request(api.moneyRecord, 'GET', {
      page: pageIndex,
      limit: pageSize
    }).then(data => {
      setDataList(dataList.concat(data.page.list))
      setTotalCount(data.page.totalCount)
      setIsEnd(Math.ceil(data.page.totalCount / pageSize) <= pageIndex)
    }).catch(res => {
      setTimeout(function () {
        getList()
      }, 1500)
    })
  }
  useEffect(() => {
    getList()
  }, [])
  const fetchData = (e) => {
    console.log('fetch')
    if (isEnd) return
    getList()
  }

  return (
    <View className='record'>
      <ScrollView onScrollToLower={fetchData} lowerThreshold={100}>
        <View className='cell-group'>
          <View className="cell-item">
            <View className="item money">金额</View>
            <View className="item status">状态</View>
            <View className="item time">导入时间</View>
          </View>
          {dataList.map(item => {
            let p_status = '等待打款'
            if(item.pay_status === -1) {
              p_status = '打款失败'
            } else if (item.pay_status === 9) {
              p_status = '打款成功'
            }
            return <View className="cell-item" key={item.id}>
              <View className="item money">{item.settle_money}元</View>
              <View className="item status">{p_status}</View>
              <View className="item time">{item.pay_time}</View>
            </View>
          })}
        </View>
        <View class="nomore">{isEnd ? '没有更多了' : '加载中...'}</View>
      </ScrollView>
    </View>
  )
}

export default Record
